<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>欢迎使用联合防卫系统</title>
<script type="text/javascript" src="/static/js/root.js"></script>
<script src="/static/js/vue.js"></script>
<script src="/static/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="/static/js/util.js"></script>
<!--    <script type="text/javascript" src="/static/js/websocket.js"></script>-->
<!-- 引入样式 -->
<link rel="stylesheet" type="text/css" href="/static/css/index.css"/>
<!-- 引入组件库 -->
<script src="/static/js/element.js"></script>


    <script src="/static/amap/AMap3.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/js/ckplayerx3/css/ckplayer.css">
<script type="text/javascript" charset="utf-8" src="/static/js/ckplayerx3/js/ckplayer.js"></script>
    <script src="/static/js/ZLMRTCClient.js"></script>
    <script src="/static/js/echart/echarts.min.js"></script>
</head>
<body>
<div id="app">
    <template>
        <!--narbar-->
        <el-row :gutter="0">
            <el-col>
                <div class="navbar">
                    <div class="navbar-container">
                        <div class="navbar-title">
<!--                            联合防卫系统-->
                            <img src="/static/img/sys/title.png" style="width: 280px;" />
                        </div>
                        <div class="navbar-right">
                            <div class="navbar-btns">
                                <div class="navbar-btn btn-active" @click="changeModel()">
                                    模式切换
                                </div>
                                <div class="navbar-btn btn-active" @click="toDevice">设备列表</div>
                            </div>
                            <div class="times">
                                {{currentTime}} {{currentWeek}} 晴 30℃
                            </div>


                        </div>
                    </div>


                    <div style="margin-right: 10px;">
                        <el-dropdown>

                              <span class="el-dropdown-link">
                                  <img src="/static/img/sys/ (5).png" style="display: inline-block;width: 50px;margin-top: 0px;vertical-align: middle;"/>
                                  <i class="el-icon-arrow-down el-icon--right" style="margin-top: 30px;color: #fff;"></i>
                              </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>退出</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </div>
            </el-col>
        </el-row>
        <!--container-->
        <div class="container">
            <el-row :gutter="20">
                <el-col :span="6">
                    <div class="c-left-item c-left-env">
                        <div class="c-left-item-title">
                            <img src="/static/img/sys/ (1).png" />
                            <span>环境信息</span>
                        </div>
                        <div class="env-content">
                            <div  class="env-item">
                                <div>
                                    <img src="/static/img/sys/wendu.png" style="width: 30px;height: 30px;"/>
                                </div>
                                <div class="env-label">
                                    <span>外部温度</span>
                                    <div>{{jikuResultInfo.windtemp}}<span>℃</span></div>
                                </div>
                            </div>

                            <div  class="env-item">
                                <div>
                                    <img src="/static/img/sys/shidu.png" style="width: 30px;height: 30px;"/>
                                </div>
                                <div class="env-label">
                                    <span>外部湿度</span>
                                    <div>{{jikuResultInfo.windhumi}}<span>%RH</span></div>
                                </div>
                            </div>

<!--                            <div  class="env-item">-->
<!--                                <div>-->
<!--                                    <img src="/static/img/sys/ (13).png"/>-->
<!--                                </div>-->
<!--                                <div class="env-label">-->
<!--                                    <span>大气压强</span>-->
<!--                                    <div>0.1<span>MPa</span></div>-->
<!--                                </div>-->
<!--                            </div>-->
                            <div  class="env-item">
                                <div>
                                    <img src="/static/img/sys/fengji.png" style="width: 30px;height: 30px;"/>
                                </div>
                                <div class="env-label">
                                    <span>风力等级</span>
                                    <div>{{jikuResultInfo.speedvalue}}<span>级</span></div>
                                </div>
                            </div>

<!--                            <div  class="env-item">-->
<!--                                <div>-->
<!--                                    <img src="/static/img/sys/ (15).png"/>-->
<!--                                </div>-->
<!--                                <div class="env-label">-->
<!--                                    <span>内部温度</span>-->
<!--                                    <div>26<span>℃</span></div>-->
<!--                                </div>-->
<!--                            </div>-->

<!--                            <div  class="env-item">-->
<!--                                <div>-->
<!--                                    <img src="/static/img/sys/ (16).png"/>-->
<!--                                </div>-->
<!--                                <div class="env-label">-->
<!--                                    <span>内部湿度</span>-->
<!--                                    <div>29<span>%RH</span></div>-->
<!--                                </div>-->
<!--                            </div>-->

<!--                            <div  class="env-item">-->
<!--                                <div>-->
<!--                                    <img src="/static/img/sys/ (14).png"/>-->
<!--                                </div>-->
<!--                                <div class="env-label">-->
<!--                                    <span>天气状况</span>-->
<!--                                    <div>雨天<span></span></div>-->
<!--                                </div>-->
<!--                            </div>-->
                            <div  class="env-item">
                                <div>
                                    <img src="/static/img/sys/fengxiang.png" style="width: 28px;height: 28px;margin-right: 5px;"/>
                                </div>
                                <div class="env-label">
                                    <span>风向</span>
                                    <div>{{jikuResultInfo.wind}}</div>
                                </div>
                            </div>
                            <div  class="env-item">
                                <div>
                                    <img src="/static/img/sys/fengsu.png" style="width: 30px;height: 30px;"/>
                                </div>
                                <div class="env-label">
                                    <span>风速</span>
                                    <div>{{jikuResultInfo.windspeed}}<span>m/s</span></div>
                                </div>
                            </div>

<!--                            <div  class="env-item">-->
<!--                                <div>-->
<!--                                    <img src="/static/img/sys/ (18).png"/>-->
<!--                                </div>-->
<!--                                <div class="env-label">-->
<!--                                    <span>光照</span>-->
<!--                                    <div>29<span>%RH</span></div>-->
<!--                                </div>-->
<!--                            </div>-->
                        </div>
                    </div>
                    <div class="c-left-item c-left-jk">
                        <div class="c-left-item-title">

                            <div>
                                <img src="/static/img/sys/ (1).png" />
                                <span>机库运行信息</span>
                            </div>
                            <div>
                                <img src="/static/img/sys/ (4).png" style="height: 25px;width: 25px;" @click="toControl(1)"/>
                            </div>
                        </div>
                        <div class="jk-content">
                            <div>
                                <div style="text-align: center;">
<!--                                    <img src="/static/img/sys/1722050761848.jpg" style="width: 180px;"/>-->
                                    <div id="jikuyunxing" style="width: 200px;height: 150px;margin-top: 20px;"></div>
                                </div>
                                <div>机库001</div>
                            </div>
                            <div class="jk-label">
                                <div class="jk-label-line">
                                    <ul>
                                        <li class="key">功耗总值</li>
                                        <li>--</li>
                                    </ul>
                                </div>
                                <div class="jk-label-line">
                                    <ul>
                                        <li class="key">充电状态</li>
                                        <li>--</li>
                                    </ul>
                                </div>
                                <div class="jk-label-line">
                                    <ul>
                                        <li class="key">异常预警</li>
                                        <li>--</li>
                                    </ul>
                                </div>
                                <div class="jk-label-line">
                                    <ul>
                                        <li class="key">机坪状态</li>
                                        <li>
                                            <span v-if="jikuResultInfo.push_limit_stat == '3' && jikuResultInfo.pull_limit_stat != '3'" class="keyvalue">推出</span>
                                            <span v-if="jikuResultInfo.pull_limit_stat == '3' && jikuResultInfo.push_limit_stat != '3'" class="keyvalue">收回</span>
                                            <span v-if="jikuResultInfo.push_limit_stat == '3' && jikuResultInfo.pull_limit_stat == '3'" class="keyvalue">异常</span>
                                            <span>通信状态：{{ jikuResultInfo.push_stat ? 'OK':'Err'}}</span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="jk-label-line">
                                    <ul>
                                        <li class="key">应急开关</li>
                                        <li>--</li>
                                    </ul>
                                </div>
                                <div class="jk-label-line">
                                    <ul>
                                        <li class="key">经纬度</li>
                                        <li>--</li>
                                    </ul>
                                </div>
                                <div class="jk-label-line">
                                    <ul>
                                        <li class="key">库门状态</li>
                                        <li>
                                            <span v-if="jikuResultInfo.door_openlimit_stat && !jikuResultInfo.door_closelimit_stat" class="keyvalue">打开</span>
                                            <span v-if="jikuResultInfo.door_closelimit_stat && !jikuResultInfo.door_openlimit_stat" class="keyvalue">关闭</span>
                                            <span v-if="jikuResultInfo.door_openlimit_stat && jikuResultInfo.door_closelimit_stat" class="keyvalue">异常</span>
                                            <span>通信状态：{{ jikuResultInfo.doorstat ? 'OK':'Err'}}</span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="jk-label-line">
                                    <ul>
                                        <li class="key">归位状态</li>
                                        <li>
                                            <span v-if="jikuResultInfo.limit1_stat == '0x0F'" class="keyvalue">松开</span>
                                            <span v-if="jikuResultInfo.limit1_stat == '0xF0'" class="keyvalue">夹紧</span>
                                            <span v-if="jikuResultInfo.limit1_stat != '0x0F' && jikuResultInfo.limit1_stat != '0xF0'" class="keyvalue">异常</span>
                                            <span>通信状态：{{ jikuResultInfo.return_stat ? 'OK':'Err'}}</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="c-left-item c-left-wrj">
                        <div class="c-left-item-title">

                            <div>
                                <img src="/static/img/sys/ (1).png" />
                                <span>无人机运行信息</span>
                            </div>
                            <div>
                                <img src="/static/img/sys/ (4).png" style="height: 25px;width: 25px;" @click="toControl(2)"/>
                            </div>
                        </div>
                        <div class="wrj-content">
                            <div style="text-align: center;margin: 10px 0 20px 0;">{{wrjInfo.name}}</div>
                            <div class="wrj-labels">
                                <div class="wrj-label-left">
                                    <div class="wrj-label">
                                        <div class="wrj-label-line">
                                            <ul>
                                                <li class="key">电池电量</li>
                                                <li>{{wurenjiResultInfo.electricity}}</li>
                                            </ul>
                                        </div>


                                        <div class="wrj-label-line">
                                            <ul>
                                                <li class="key">飞行高度</li>
                                                <li>{{wurenjiResultInfo.altitude}}</li>
                                            </ul>
                                        </div>

                                        <div class="wrj-label-line">
                                            <ul>
                                                <li class="key">飞行状态</li>
                                                <li>{{wurenjiResultInfo.flight_status}}</li>
                                            </ul>
                                        </div>

                                        <div class="wrj-label-line">
                                            <ul>
                                                <li class="key">报警信息</li>
                                                <li>{{wurenjiResultInfo.alarm_information}}</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="wrj-label-right">
                                    <div class="wrj-label">
                                        <div class="wrj-label-line">
                                            <ul>
                                                <li class="key">抛投状态</li>
                                                <li>{{wurenjiResultInfo.throw_status==true ? '开':'关'}}</li>
                                            </ul>
                                        </div>

                                        <div class="wrj-label-line">
                                            <ul>
                                                <li class="key">经度</li>
                                                <li>{{wurenjiResultInfo.longitude}}</li>
                                            </ul>
                                        </div>

                                        <div class="wrj-label-line">
                                            <ul>
                                                <li class="key">纬度</li>
                                                <li>{{wurenjiResultInfo.latitude}}</li>
                                            </ul>
                                        </div>

                                        <div class="wrj-label-line">
                                            <ul>
                                                <li class="key">图像锁定</li>
                                                <li>--</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="c-left-item c-left-count">
                        <div class="c-left-count-title">

                            <div style="width: 33%;">
                                <div class="c-left-item-title" >
                                    <img src="/static/img/sys/ (1).png" style="width: 100%;"/>
                                    <span>告警次数</span>
                                </div>
                                <div class="count-label">
                                    <img src="/static/img/sys/ (6).png" style="width: 100px;"/>
                                    <div>380</div>
                                </div>
                            </div>
                            <div style="width: 33%;">
                                <div class="c-left-item-title">
                                    <img src="/static/img/sys/ (1).png" style="width: 100%;"/>
                                    <span>设备数量</span>
                                </div>
                                <div class="count-label">
                                    <img src="/static/img/sys/ (7).png" style="width: 100px;"/>
                                    <div>2/10</div>
                                </div>
                            </div>
                            <div style="width: 33%;">
                                <div class="c-left-item-title" >
                                    <img src="/static/img/sys/ (1).png" style="width: 100%;"/>
                                    <span>设备运行时长</span>
                                </div>
                                <div class="count-label">
                                    <img src="/static/img/sys/ (8).png" style="width: 100px;"/>
                                    <div>512h</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="18">
                    <div id="container" ref="container" class="allnav" style="height: 640px;width: 100%;margin-bottom: 20px;border:1px solid #AC8542;"></div>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <div class="video-bg">
                                <div class="video-title">无人机</div>
<!--                                <div class="video" style="width: 90%;height: 240px;margin: 0 auto;padding-top: 40px;"></div>-->
                                <video class="demo-video" ref="videoPlayer" controls autoplay muted style="width: 90%;height: 240px;margin: 0 auto;padding-top: 40px;">
                                    Your browser is too old which doesn't support HTML5 video.
                                </video>
                            </div>

                        </el-col>
                        <el-col :span="8">
                            <div class="video-bg">
                                <div class="video-title">机库一</div>
<!--                                <div class="video1" style="width: 90%;height: 240px;margin: 0 auto;padding-top: 40px;"></div>-->
                                <video class="demo-video" ref="videoPlayer1" controls autoplay muted style="width: 90%;height: 240px;margin: 0 auto;padding-top: 40px;">
                                    Your browser is too old which doesn't support HTML5 video.
                                </video>
                            </div>

                        </el-col>
                        <el-col :span="8">
                            <div class="video-bg">
                                <div class="video-title">机库二</div>
<!--                                <div class="video2" style="width: 90%;height: 240px;margin: 0 auto;padding-top: 40px;"></div>-->
                                <video class="demo-video" ref="videoPlayer2" controls autoplay muted style="width: 90%;height: 240px;margin: 0 auto;padding-top: 40px;">
                                    Your browser is too old which doesn't support HTML5 video.
                                </video>
                            </div>
                        </el-col>
                    </el-row>
                </el-col>

            </el-row>
        </div>

        <el-dialog title="设备列表" :visible.sync="deviceDialog" width="80%">
            <span>这是一段信息</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="deviceDialog = false">取 消</el-button>
                <el-button type="primary" @click="deviceDialog = false">确 定</el-button>
              </span>
        </el-dialog>
        <div v-if="controlWrj.show" class="control-wrj" :style="{width: controlWrj.width ,height: controlWrj.height}">
            <div style="position: absolute;right: 0;top:0;background-image: url('/static/img/sys-wrj/closebj.png');width: 40px;cursor: pointer;" @click="closeControl">
                <img src="/static/img/sys-wrj/close.png" style="margin-left: 15px;width: 16px;" />
            </div>
            <div style="position: absolute;top: 5px;width: 300px;text-align: center;margin-left: -150px;left: 50%;font-size: 24px;letter-spacing: 2px;">无人机控制按钮</div>
            <div style="position: absolute;bottom: 15px;width: 600px;text-align: center;margin-left: -300px;left: 50%;font-size: 14px;letter-spacing: 1px;color: #A89882;">
                <img src="/static/img/sys-wrj/tan.png" style="width: 24px;vertical-align: middle;"/>
                无人机控制台按键，非专业人员请勿使用！使用时请清空周边人员，保证安全！
            </div>
            <el-row :gutter="100">
                <el-col :span="14">
                    <div style="text-align: center;position: relative;width: 135px;margin: 0 auto;">
                        <img src="/static/img/sys-wrj/btn.png" style="width: 120px;" />
                        <span style="position: absolute;left: 28px;top: 2px;">无人机控制</span>
                    </div>
                    <div class="control-wrj-fun" style="margin-top: 20px;">
                        <div style="position: relative;">
                            <span style="position: absolute;left: 15px;top: -20px;">定点</span>
                            <img src="/static/img/sys-wrj/dw.png" style="width: 68px;cursor: pointer;" @click="sendWsDd('coordinate_control','0', '0', 42 )"/>
                            <div style="background-image: url('/static/img/sys-wrj/tip.png');position: absolute;width: 160px;
                            height:89px;background-position: center center;background-repeat: no-repeat;background-size: 100% 100%;text-align: center;left: -40px;">
                                <div style="margin-top: 10px;">经度<input type="text" style="width: 100px;" id="jingdu" v-model="jingdu"/></div>
                                <div style="margin-top: 3px;">纬度<input type="text" style="width: 100px;" id="weidu" v-model="weidu"/></div>
                                <div style="margin-top: 3px;">高度<input type="text" style="width: 100px;" id="gaodu" v-model="gaodu"/></div>
                            </div>
                        </div>

                        <div style="position: relative;">
                            <span style="position: absolute;left: 15px;top: -20px;">抛投1</span>
                            <img src="/static/img/sys-wrj/ps.png" style="width: 68px;cursor: pointer;" @click="sendWsRrj('throw_1','0', '0', 42, true)"/></div>
                        <div style="position: relative;">
                            <span style="position: absolute;left: 15px;top: -20px;">抛投2</span>
                            <img src="/static/img/sys-wrj/ps.png" style="width: 68px;cursor: pointer;" @click="sendWsRrj('throw_2','0', '0', 42, true)"/></div>
                        <div style="position: relative;">
                            <span style="position: absolute;left: 15px;top: -20px;">喷射</span>
                            <img src="/static/img/sys-wrj/s.png" style="width: 68px;cursor: pointer;" @click="sendWsRrj('inject','0', '0', 42, true)"/></div>
                        <div style="position: relative;">
                            <span style="position: absolute;left: 15px;top: -20px;">发射</span>
                            <img src="/static/img/sys-wrj/f.png" style="width: 68px;cursor: pointer;" @click="sendWsRrj('launch','0', '0', 42, true)"/></div>
                    </div>
                    <div class="control-wrj-fun" style="margin-top: 120px;">

                        <div style="position: relative;cursor: pointer;" @click="sendWsRrj('rudder_left','0', '0', 42, true)">
                            <img src="/static/img/sys-wrj/hangxz.png" style="width: 100px;" />
<!--                            <span style="position: absolute;left: 40px;top: 35px;">航向左</span>-->
                            <span style="position: absolute;left: 40px;top: 35px;">左转</span>
                        </div>
                        <div style="position: relative;margin: 0 20px;margin-left: -125px;">
                            <span style="position: absolute;top: 45px;left: -40px;">左移</span>
                            <img src="/static/img/sys-wrj/left.png" style="width: 53px;left: -8px;position: absolute;cursor: pointer;" @click="sendWsRrj('drone_left','0', '0', 42, true)"/>
                            <span style="position: absolute;top: -50px;width:100px;left: 55px;">上升</span>
                            <img src="/static/img/sys-wrj/up.png" style="width: 112px;position: absolute;top: -25px;left: 20px;cursor: pointer;" @click="sendWsRrj('elevator_up','0', '0', 42, true)" />
                            <span style="position: absolute;top: 44px;width:40px;left: 57px;z-index: 100;cursor: pointer;" v-if="wrjStatus.locking" @click="sendWsRrj('unlock','0', '0', 42, true)">解锁</span>
                            <img src="/static/img/sys-wrj/center.png" style="width: 87px;position: absolute;top: 14px;left: 33px;cursor: pointer;" @click="sendWsRrj('unlock','0', '0', 42, true)" v-if="wrjStatus.locking"/>
                            <span style="position: absolute;top: 44px;width:40px;left: 57px;z-index: 100;cursor: pointer;" v-if="wrjStatus.unlock" @click="sendWsRrj('locking','0', '0', 42, true)">锁定</span>
                            <img src="/static/img/sys-wrj/center.png" style="width: 87px;position: absolute;top: 14px;left: 33px;cursor: pointer;" @click="sendWsRrj('locking','0', '0', 42, true)" v-if="wrjStatus.unlock"/>
                            <span style="position: absolute;top: 140px;width:100px;left: 55px;">下降</span>
                            <img src="/static/img/sys-wrj/down.png" style="width: 112px;position: absolute;top: 90px;left: 21px;cursor: pointer;" @click="sendWsRrj('elevator_down','0', '0', 42, true)"/>
                            <span style="position: absolute;left: 155px;width:100px;top:45px;">右移</span>
                            <img src="/static/img/sys-wrj/right.png" style="width: 53px;position: absolute;left: 108px;cursor: pointer;" @click="sendWsRrj('drone_right','0', '0', 42, true)"/>

                            <div style="position: absolute;cursor: pointer;left: 25px;top: -120px;" @click="sendWsRrj('drone_advance','0', '0', 42, true)">
                                <img src="/static/img/sys-wrj/qianjin.png" style="width: 100px;height: 50px;" />
                                <span style="position: absolute;left: 32px;top: 20px;">前进</span>
                            </div>
                            <div style="position: absolute;cursor: pointer;left: 25px;bottom: -150px;" @click="sendWsRrj('drone_back_off','0', '0', 42, true)">
                                <img src="/static/img/sys-wrj/houtui.png" style="width: 100px;height: 50px;" />
                                <span style="position: absolute;left: 32px;top: 5px;">后退</span>
                            </div>

                        </div>

                        <div style="position: relative;cursor: pointer;" @click="sendWsRrj('rudder_right','0', '0', 42, true)">
                            <img src="/static/img/sys-wrj/hangxy.png" style="width: 100px;" />
<!--                            <span style="position: absolute;right: 40px;top: 35px;">航向右</span>-->
                            <span style="position: absolute;right: 40px;top: 35px;">右转</span>
                        </div>



                    </div>
                </el-col>
                <el-col :span="10">
                    <div style="text-align: center;width: 135px;margin: 0 auto;position: relative;">
                        <img src="/static/img/sys-wrj/btn.png" style="width: 120px;" />
                        <span style="position: absolute;left: 35px;top: 2px;">吊舱控制</span>
                    </div>
                    <div class="control-wrj-fun" style="height: 200px;">
                        <div style="position: relative;width: 300px;margin: 0 auto;margin-left: 90px;">
                            <div style="position: absolute;left: 20px;top:70px;">
                                <span style="position: absolute;left: -30px;top:20px;">回中</span>
                                <img src="/static/img/sys-wrj/dw2.png" style="width: 72px;cursor: pointer;" @click="sendWsDc('camera_left','0', '0', 42, true)"/>
                            </div>
                            <div style="position: absolute;left: 100px;">
                                <span style="position: absolute;left: 25px;top: -20px;">上</span>
                                <img src="/static/img/sys-wrj/up1.png" style="width: 72px;cursor: pointer;" @click="sendWsDc('camera_up','0', '0', 42, true)"/>
                            </div>
                            <div style="position: absolute;left: 100px;bottom: -20px;">
                                <span style="position: absolute;bottom:  -10px;left:25px;">下</span>
                                <img src="/static/img/sys-wrj/down1.png" style="width: 72px;cursor: pointer;" @click="sendWsDc('camera_down','0', '0', 42, true)"/>
                            </div>
                            <div style="position: absolute;left: 180px;top:70px;">
                                <span style="position: absolute;left: 65px;top: 20px;width: 80px;">一键向下</span>
                                <img src="/static/img/sys-wrj/down2.png" style="width: 72px;cursor: pointer;" @click="sendWsDc('camera_right','0', '0', 42, true)"/>
                            </div>

                        </div>
                    </div>
                    <div class="control-wrj-fun" style=";margin: 0 auto;margin-top: 80px;">
                        <div style="width: 300px;display: flex;justify-content: space-between;margin: 0 auto;margin-left: 75px;">
                            <div style="position: relative;cursor: pointer;margin-left: 20px;" @click="sendWsDc('camera_snap','0', '0', 42, true)">
                                <img src="/static/img/sys-wrj/pz.png" style="width: 100px;" />
                                <span style="position: absolute;left: 50px;top: 8px;">拍照</span>
                            </div>
                            <div style="position: relative;cursor: pointer;margin-right: 20px;" @click="sendWsDc('camera_record','0', '0', 42, true)">
                                <img src="/static/img/sys-wrj/sx.png" style="width: 100px;" />
                                <span style="position: absolute;left: 50px;top: 8px;">录像</span>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>

        </div>

        <div v-if="controlJk.show" class="control-jk" :style="{width: controlJk.width ,height: controlJk.height}">
<!--        <div v-if="controlJk.show" class="control-jk" :style="{width: '600px' ,height: '400px'}">-->
            <div style="position: absolute;right: 0;top:0;background-image: url('/static/img/sys-wrj/closebj.png');width: 40px;cursor: pointer;" @click="closeControl">
                <img src="/static/img/sys-wrj/close.png" style="margin-left: 15px;width: 16px;" />
            </div>
            <div style="position: absolute;top: 5px;width: 300px;text-align: center;margin-left: -150px;left: 50%;font-size: 24px;letter-spacing: 2px;">机库控制按钮</div>
            <div style="position: absolute;bottom: 15px;width: 600px;text-align: center;margin-left: -300px;left: 50%;font-size: 14px;letter-spacing: 1px;color: #A89882;">
                <img src="/static/img/sys-wrj/tan.png" style="width: 24px;vertical-align: middle;"/>
                机库控制台按键，非专业人员请勿使用！使用时请清空周边人员，保证安全！
            </div>
            <el-row :gutter="100">

                <el-col :span="24">
<!--                    <div style="text-align: center;width: 135px;margin: 0 auto;position: relative;">-->
<!--                        <img src="/static/img/sys-wrj/btn.png" style="width: 120px;" />-->
<!--                        <span style="position: absolute;left: 35px;top: 2px;">机库控制</span>-->
<!--                    </div>-->
                    <div class="control-jk-fun" style="height: 200px;">
                        <div style="margin: 0 auto;">
                            <div style="display: flex;">
                                <div style="position: relative;width: 200px;text-align: center;background-image: url('/static/img/sys-jk/center.png');background-repeat: no-repeat;background-size: contain;background-position: center;">

                                    <img src="/static/img/sys-jk/qifei2.png" style="width: 42px;cursor: pointer;margin-top: 15px;" @click="sendWsJk('take_off','0', '0', 32, true)"/>
                                    <div style="">起飞</div>
                                </div>
                                <div style="position: relative;width: 200px;text-align: center;background-image: url('/static/img/sys-jk/center.png');background-repeat: no-repeat;background-size: contain;background-position: center;">

                                    <img src="/static/img/sys-jk/fanhang2.png" style="width: 42px;cursor: pointer;margin-top: 15px;" @click="sendWsJk('return','0', '0', 32, true)"/>
                                    <div style="">返航</div>
                                </div>
                            </div>
                            <div style="display: flex;margin-top: 80px;">
                                <div style="position: relative;width: 200px;text-align: center;background-image: url('/static/img/sys-jk/center.png');background-repeat: no-repeat;background-size: contain;background-position: center;">

                                    <img src="/static/img/sys-jk/kai.png" style="width: 42px;cursor: pointer;margin-top: 15px;" @click="sendWsJk('uav_poweron_stat','0', '0', 32, true)"/>
                                    <div style="">电源开</div>
                                </div>

                                <div style="position: relative;width: 200px;text-align: center;background-image: url('/static/img/sys-jk/center.png');background-repeat: no-repeat;background-size: contain;background-position: center;">

                                    <img src="/static/img/sys-jk/guan.png" style="width: 42px;cursor: pointer;margin-top: 15px;" @click="sendWsJk('uav_poweroff_stat','0', '0', 32, true)"/>
                                    <div style="">电源关</div>
                                </div>
                            </div>

                        </div>
                    </div>

                </el-col>
            </el-row>

        </div>
    </template>
</div>
<script type="text/javascript">
var wrjKz = {
    "dtime":"指令下发时间",
    "unlock":"解锁",
    "locking":"加锁",
    "longitude":"经度坐标",
    "latitude":"纬度坐标",
    "altitude":"高度",
    "throw_1":"抛投1",
    "throw_2":"抛投2",
    "launch":"发射",
    "inject":"喷射",
    "rudder_right":"航向右",
    "rudder_left":"航向左",
    "elevator_up":"上升",
    "elevator_down":"下降",
    "drone_right":"无人机右移",
    "drone_left":"无人机左移",
    "drone_advance":"无人机前进",
    "drone_back_off":"无人机后退",
    "camera_up":"吊舱上",
    "camera_down":"吊舱下",
    "camera_right":"吊舱右",
    "camera_left":"吊舱左",
    "camera_snap":"吊舱拍照",
    "camera_record":"吊舱录像",
    "open_Laser": "激光测距供电",
    "close_Laser": "激光测距断电",
    "open_insurance": "无人机激光测距保险",
    "close_insurance": "无人机激光测距保险"
};
var jkKz = {
    "take_off": "起飞",
    "return": "返航",
    "uav_poweron_stat": "无人机电源开",
    "uav_poweroff_stat": "无人机电源关"
}
var app = new Vue({
    el: '#app',
    data(){
        return{
            message: 'Hello Vue!',
            deviceDialog: false,
            map: null,
            currentTime: '',
            currentWeek: '',
            controlWrj: {
                show: false,
                width: '1500px',
                height: '340px'
            },

            controlJk: {
                show: false,
                width: '1500px',
                height: '340px'
            },
            wsUrl : 'ws://localhost:7030/websocket/test/userid',
            websocketWrj: null,
            websocketDc: null,
            websocketJk: null,
            st: null,
            st2: null,
            reconectTimes: 2,
            heartbeatTime: '',
            weidu:'',
            jingdu:'',
            gaodu:'',
            wrjInfo:{
                name: ''
            },
            dcInfo:{
                name: ''
            },
            jkInfo:{
                name: ''
            },
            wrjStatus:{
                unlock: true,
                locking: false
            },
            player: null,
            player1: null,
            player2: null,
            // streamUrl: "http://192.168.1.45:1881/index/api/webrtc?app=live&stream=0&type=play",
            streamUrl: "http://192.168.1.239:1881/webrtc/?app=live&stream=239&type=play",
            streamUrl1: "http://192.168.1.239:1881/webrtc/?app=live&stream=100&type=play",
            streamUrl2: "http://192.168.1.239:1881/webrtc/?app=live&stream=200&type=play",
            // mapCenter: [107.184556,29.666355],
            mapCenter: [107.182029,29.666936],
            mapWrj: [107.183029,29.666936],
            jikuResultInfo: {

                windtemp : '--',
                windspeed: "--",
                windhumi: "--",
                speedvalue: "--",
                wind: "--"
            },
            wurenjiResultInfo:{
                longitude: '--',
                latitude: '--',
                altitude: '--',
                electricity: '--',
                flight_status: '--',
                alarm_information: '--',
                throw_status: '--'
            },
            guijidatas : [{weidu:38.9939848,jingdu:117.1264567,time:"10:02:00"},{weidu:38.9879848,jingdu:117.1204567,time:"10:04:00"},{weidu:38.9909848,jingdu:117.1294567,time:"10:06:00"},{weidu:38.9909848,jingdu:117.1174567,time:"10:08:00"},{weidu:38.9979848,jingdu:117.1234567,time:"10:10:00"},{weidu:38.9839848,jingdu:117.1234567,time:"10:12:00"}]
        }

    },
    mounted :function () {
        let that = this;
        that.currentWeek = getWeek();
        that.currentTime = getTime();
        that.getTime();
        that.init();
        console.log('load success...')
        that.initMap('container',function (){
            console.log('loaded map success!');

            // that.runTrack();
        });

        // that.initPlayer().bar(false);
        // that.initPlayer1().bar(false);
        // that.initPlayer2().bar(false);
        // that. initSocket();

        that.initPlayer();
        that.initPlayer1();
        that.initPlayer2();

        that.runTimeSendData();
    },
    methods :{
        init: function(){
            let that = this;
            console.log('call init method.')
            //获取无人机设备信息
            that.loadWrj(); //机库和无人机共用ip和端口
            //获取吊舱
            that.loadDc();
            //获取机库
            // that.loadJk();
            that.initEchart();

        },
        loadWrj(){
            let that = this;
            that.getWrjDevice(function(){

                //初始化socket
                wbUtil.initSocket('ws://' + that.wrjInfo.ip + ':' + that.wrjInfo.port, function(websocket, data){
                // wbUtil.initSocket('ws://localhost:7030/websocket/test/1', function(websocket, data){
                    console.log('无人机-机库')
                    wbUtil.websocketWrj = websocket;
                    that.receiveWebsocket(data);
                })


            });
        },
        loadDc(){
            let that = this;
            that.getDcDevice(function() {
                wbUtil.initSocket('ws://' + that.dcInfo.ip + ':' + that.dcInfo.port, function(websocket, data){
                // wbUtil.initSocket('ws://localhost:7030/websocket/test1/2', function(websocket, data){
                    wbUtil.websocketDc = websocket
                    console.log('吊舱')
                    that.receiveWebsocket(data);
                })
            })
        },
        // loadJk(){
        //     let that = this;
        //     that.getJkDevice(function() {
        //         wbUtil.initSocket('ws://' + that.jkInfo.ip + ':' + that.jkInfo.port, function(websocket, data){
        //         // wbUtil.initSocket('ws://localhost:7030/websocket/test/2', function(websocket, data){
        //             wbUtil.websocketJk = websocket
        //             console.log('机库')
        //             that.receiveWebsocket(data);
        //         })
        //     })
        //
        // },
        receiveWebsocket(data){
            let that = this;
            if(data.cmd == '31'){ //心跳
                console.log('心跳:' + new Date());
                that.heartbeatTime = new Date();
            }else if(data.cmd == '42'){//无人机控制 => 响应
                let d = data.data;
                if(d.cmdAck == 0){//成功
                    if(d.OK == 'unlock'){//解锁成功
                        that.wrjStatus.unlock = true
                        that.wrjStatus.locking = false
                    }else if(d.OK == 'locking') {//锁定成功
                        that.wrjStatus.unlock = false
                        that.wrjStatus.locking = true
                    }
                    that.tipMsg(wrjKz[d.OK],  '执行成功');

                }
            }else if(data.cmd == '43'){ //无人机查询
                let d = data.data;
                let longitude = d.longitude;
                let latitude = d.latitude;
                let altitude = d.altitude;
                var tmp = window.localStorage.getItem("wrj_data");
                if(!tmp){
                    window.localStorage.setItem("wrj_data",  longitude+',' + latitude+',' + altitude );
                }else{
                    window.localStorage.setItem("wrj_data",  tmp + ';'+ longitude+',' + latitude+',' + altitude );
                }
                that.wurenjiResultInfo = d;

            }else if(data.cmd == '32'){//机库控制 => 响应
                let d = data.data;
                if(d.cmdAck == 0){//成功

                    that.tipMsg(jkKz[d.OK],  '执行成功');

                }
            }else if(data.cmd == '33'){//机库查询
                console.log("cmd ================================== 33");
                let d = data.data;
                // that.jikuResultInfo = {
                //     windtemp : '35',
                //     windspeed: "100",
                //     windhumi: "60",
                //     speedvalue: "3",
                //     wind: "东南"
                // }
                that.jikuResultInfo = d;
            }
        },
        runTimeSendData(){
            let that = this;
            var tmp = window.localStorage.getItem("wrj_data");
            if(tmp){
                that.sendWrjData({
                    deviceId: that.wrjInfo.id,
                    datas: tmp
                },function(){
                    console.log('wrj数据推送完成')
                })
            }

            setTimeout(function(){
                that.runTimeSendData();
            }, 10*1000)
        },
        tipMsg(title, message, type){
            if(!type){
                type = 'success';
            }
            this.$notify({
                title: title,
                message: message,
                type: type,
                duration: 2000
            });
        },
        // heartbeat(){
        //     let oldTime = this.heartbeatTime? new Date(this.heartbeatTime) : new Date();
        //     let newTime = new Date();
        //     if(oldTime.getTime() + 1000*10 < newTime.getTime()){
        //
        //         if(this.reconectTimes < 0){
        //             this.reconectTimes = 2;
        //             console.log('已到达3次，进行重连');
        //             clearTimeout(this.st);
        //             this.websocket.close();
        //             this.initSocket()
        //         }else{
        //             console.log('server心跳已超时 第' + (3 - this.reconectTimes) + '次');
        //             this.reconectTimes--;
        //         }
        //
        //
        //     }else{
        //         console.log('server心跳未超时');
        //     }
        //     this.st = setTimeout(this.heartbeat, 10*1000)
        // },
        // sdheartbeat(){
        //     var json = {
        //         "devType": "0",
        //         "devid ": '0',
        //         "cmd": 31,
        //         "data": null
        //     }
        //     this.websocket.send(JSON.stringify(json))
        //     this.st2 = setTimeout(this.sdheartbeat, 10*1000)
        // },


        // ,
        sendWsDd(sendKey,devType, devid, cmd){
            console.log('发送无人机定点指令');
            wbUtil.sendWsSpec(wbUtil.websocketWrj, this.jingdu,this.weidu,this.gaodu,sendKey,devType, devid, cmd)
        },
        sendWsRrj(sendKey,devType, devid, cmd , sendValue){
            console.log('发送无人机指令');
            wbUtil.sendWs(wbUtil.websocketWrj, sendKey,devType, devid, cmd , sendValue)
        },
        sendWsDc(sendKey,devType, devid, cmd , sendValue){
            console.log('发送吊舱指令');
            wbUtil.sendWs(wbUtil.websocketDc, sendKey,devType, devid, cmd , sendValue)
        },
        sendWsJk(sendKey,devType, devid, cmd , sendValue){
            console.log('发送机库指令');
            wbUtil.sendWs(wbUtil.websocketWrj, sendKey,devType, devid, cmd , sendValue)
        },
        closeControl(){
            this.controlWrj.show = false;
            this.controlJk.show = false;
        },
        toControl(type){
            if(type == 1){
                if(!this.controlWrj.show){
                    this.controlJk.show = true;
                    if(this.controlJk.show){
                        // alert(this.$refs.container.offsetHeight)
                        this.controlJk.width = (this.$refs.container.offsetWidth - 160 - 12 - 30 - 10) + 'px'
                        this.controlJk.height = (this.$refs.container.offsetHeight - 160 - 50 + 28) + 'px'
                    }
                }

            }else if(type == 2){
                // this.controlWrj.show = this.controlWrj.show ? false: true;
                if(!this.controlJk.show){
                    this.controlWrj.show = true;
                    if(this.controlWrj.show){
                        // alert(this.$refs.container.offsetHeight)
                        this.controlWrj.width = (this.$refs.container.offsetWidth - 160 - 12 - 30 - 10) + 'px'
                        this.controlWrj.height = (this.$refs.container.offsetHeight - 160 - 50 + 28) + 'px'
                    }
                }

            }
        },
        getTime(){
            let that = this;
            that.currentTime = getTime();
            that.currentWeek = getWeek();
            setTimeout(function(){
                that.getTime();
            },1000)
        },
        initPlayer(){
            //定义一个变量：videoObject，用来做为视频初始化配置
            // var videoObject = {
            //     // autoplay: true,
            //     controls:false,
            //     // loop: true, //播放结束是否循环播放
            //     // autoplay: true,//是否自动播放
            //     container: '.video', //“#”代表容器的ID，“.”或“”代表容器的class
            //     // video: 'http://ckplayer-video.oss-cn-shanghai.aliyuncs.com/sample-mp4/05cacb4e02f9d9e.mp4'//视频地址
            //     video: 'http://192.168.1.45:1881/index/api/webrtc?app=live&stream=0&type=play'//视频地址
            // };
            // return new ckplayer(videoObject);//初始化播放器

            this.player = new ZLMRTCClient.Endpoint({
                element: this.$refs.videoPlayer,
                debug: true,
                zlmsdpUrl: this.streamUrl,
                simulcast: false,
                useCamera: true,
                audioEnable: false,
                videoEnable: true,
                recvOnly: true, // 默认为接收模式
                usedatachannel: false,
            });

            this.player.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS, (e) => {
                console.log('播放成功', e.streams);
            });

            this.player.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM, (s) => {
                console.log('获取到了本地流');
            });

            this.player.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_MSG, (event) => {
                console.log('rtc datachannel 消息 :', event.data);
            });
        },
        initPlayer1(){
            //定义一个变量：videoObject，用来做为视频初始化配置
            // var videoObject = {
            //     controls:false,
            //     container: '.video1', //“#”代表容器的ID，“.”或“”代表容器的class
            //     video: 'http://ckplayer-video.oss-cn-shanghai.aliyuncs.com/sample-mp4/05cacb4e02f9d9e.mp4'//视频地址
            //
            // };
            // return new ckplayer(videoObject);//初始化播放器

            this.player1 = new ZLMRTCClient.Endpoint({
                element: this.$refs.videoPlayer1,
                debug: true,
                zlmsdpUrl: this.streamUrl1,
                simulcast: false,
                useCamera: true,
                audioEnable: false,
                videoEnable: true,
                recvOnly: true, // 默认为接收模式
                usedatachannel: false,
            });

            this.player1.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS, (e) => {
                console.log('播放成功', e.streams);
            });

            this.player1.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM, (s) => {
                console.log('获取到了本地流');
            });

            this.player1.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_MSG, (event) => {
                console.log('rtc datachannel 消息 :', event.data);
            });
        },
        initPlayer2(){
            //定义一个变量：videoObject，用来做为视频初始化配置
            // var videoObject = {
            //     controls:false,
            //     logo:'',
            //     container: '.video2', //“#”代表容器的ID，“.”或“”代表容器的class
            //     video: 'http://ckplayer-video.oss-cn-shanghai.aliyuncs.com/sample-mp4/05cacb4e02f9d9e.mp4'//视频地址
            //
            // };
            // return new ckplayer(videoObject);//初始化播放器

            this.player2 = new ZLMRTCClient.Endpoint({
                element: this.$refs.videoPlayer2,
                debug: true,
                zlmsdpUrl: this.streamUrl2,
                simulcast: false,
                useCamera: true,
                audioEnable: false,
                videoEnable: true,
                recvOnly: true, // 默认为接收模式
                usedatachannel: false,
            });

            this.player2.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS, (e) => {
                console.log('播放成功', e.streams);
            });

            this.player2.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM, (s) => {
                console.log('获取到了本地流');
            });

            this.player2.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_MSG, (event) => {
                console.log('rtc datachannel 消息 :', event.data);
            });
        },
        initEchart(){
            option = {

                series: [
                    {
                        // name: "内部进度条",
                        type: "gauge",
                        radius: '80%',
                        splitNumber: 6,

                        // markPoint: {
                        //     // 仪表盘指针圆
                        //     animation: false,
                        //     silent: true,
                        //     data: [{
                        //         x: '50%',
                        //         y: '50%',
                        //         symbol: 'circle',
                        //         symbolSize: 10,
                        //         itemStyle: {
                        //             color: 'auto',
                        //         },
                        //     }, {
                        //         x: '50%',
                        //         y: '50%',
                        //         symbol: 'circle',
                        //         symbolSize: 5,
                        //         itemStyle: {
                        //             color: '#fff'
                        //         },
                        //     }],
                        // },

                        axisLine: {
                            lineStyle: {
                                color: [
                                    [75 / 100, '#604827'],
                                    [1, "rgba(0,193,255,0.2)"]
                                ],
                                width: 10
                            }
                        },
                        axisLabel: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                        pointer: {
                            show: false,
                        },


                    },
                    {
                        name: '外部刻度',
                        type: 'gauge',
                        radius: '110%',
                        min: 0, //最小刻度
                        max: 100, //最大刻度
                        splitNumber: 10, //刻度数量
                        startAngle: 220,
                        endAngle: -40,
                        axisLine: {
                            show: false,
                        },
                        //仪表盘轴线
                        axisLabel: {
                            show: false,
                        },
                        //刻度标签
                        axisTick: {
                            show: true,
                            splitNumber: 6,
                            lineStyle: {
                                color: '#E5A243', //用颜色渐变函数不起作用
                                width: 1,
                            },
                            length: -5
                        },
                        //刻度样式
                        splitLine: {
                            show: true,
                            length: -8,
                            lineStyle: {
                                color: '#E5A243', //用颜色渐变函数不起作用
                                width: 1,
                            }
                        }, //分隔线样式
                        detail: {
                            show: false
                        },
                        pointer: {
                            show: false
                        }
                    },
                    /*内部*/
                    {
                        type: 'pie',
                        radius: ['0', '50%'],
                        z: 3,
                        hoverAnimation: false,
                        data: [{
                            name: '合规率',
                            value: 75.85,
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                        offset: 0,
                                        color: '#D3A15B'
                                    }, {
                                        offset: 0.5,
                                        color: '#1F1C16'
                                    },
                                        {
                                            offset: 1,
                                            color: '#D3A15B'
                                        }])
                                }
                            },
                            label: {
                                normal: {
                                    rich: {
                                        a: {
                                            color: '#ffffff',
                                            align: 'center',
                                            fontSize: 14,
                                        },
                                    },
                                    formatter: function (params) {
                                        return "{a|" + params.value + "%"+"}";
                                    },
                                    position: 'center',
                                    show: true
                                }
                            },
                            labelLine: {
                                show: false
                            }
                        }],
                    },
                    /*外一层*/
                    {
                        type: "pie",
                        radius: "90%",
                        avoidLabelOverlap: false,
                        z: 1,
                        hoverAnimation: false,
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        },
                        data: [{
                            "value": 1
                        }],
                        itemStyle: {
                            normal: {
                                color: 'rgba(0,131,255,0.05)',
                            }
                        }
                    },
                    //外二层圈
                    {
                        type: "pie",
                        radius: "100%",
                        avoidLabelOverlap: false,
                        z: 0,
                        hoverAnimation: false,
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        },
                        data: [{
                            "value": 1
                        }],
                        itemStyle: {
                            normal: {
                                color: 'rgba(0,131,255,0.05)',
                            }
                        }
                    }
                ]
            };



            var dom = document.getElementById("jikuyunxing");
            var myChart1 = echarts.init(dom);
            if (option && typeof option === 'object') {
                myChart1.setOption(option);
            }
        },
        initEchart2(){
            option = {

                series: [
                    {
                        center:['50%','50%'],
                        radius:'100%',
                        type: 'gauge',
                        axisLine: {
                            lineStyle: {
                                width: 5,
                                color: [
                                    [
                                        0.2, '#42e4fb'
                                    ],
                                    [
                                        0.8, '#3488db'
                                    ],
                                    [
                                        1, '#f9387f'
                                    ]
                                ],
                            }
                        },
                        markPoint: {
                            // 仪表盘指针圆
                            animation: false,
                            silent: true,
                            data: [{
                                x: '50%',
                                y: '50%',
                                symbol: 'circle',
                                symbolSize: 10,
                                itemStyle: {
                                    color: 'auto',
                                },
                            }, {
                                x: '50%',
                                y: '50%',
                                symbol: 'circle',
                                symbolSize: 5,
                                itemStyle: {
                                    color: '#fff'
                                },
                            }],
                        },
                        pointer: {
                            // 仪表盘指针
                            //icon:'none',
                            width: 5,
                            length: "80%",
                            itemStyle: {
                                color: 'auto'
                            },
                        },
                        axisTick: {
                            distance: 0,
                            length: 0,
                            lineStyle: {
                                color: 'auto',
                                width: 2
                            }
                        },
                        splitLine: {
                            distance: 0,
                            length: 5,
                            lineStyle: {
                                color: 'auto',
                                width: 2
                            }
                        },
                        axisLabel: {
                            show: false,
                            color: '#fff',
                            distance: 10,
                            fontSize: 10
                        },
                        detail: {
                            //valueAnimation: true,
                            formatter: '{value} %',
                            color: 'white',
                            fontSize: 12
                        },
                        data: [{
                            value: 85
                        }]
                    },
                ]
            };


            var dom = document.getElementById("jikuyunxing");
            var myChart1 = echarts.init(dom);
            if (option && typeof option === 'object') {
                myChart1.setOption(option);
            }
        },
        runTrack(){
            let that = this;
            var arr = []
            for (let i = 0; i < that.guijidatas.length; i++) {
                let jingdu = that.guijidatas[i].jingdu
                let weidu = that.guijidatas[i].weidu
                //arr.push([jingdu, weidu]);
            }
            arr = [
                [107.182029,29.666936],
                [107.182133,29.666970],
                [107.182206,29.666925],
                [107.182325,29.666853],
                [107.182389,29.666789],
                [107.182527,29.666707],
                [107.182467,29.666253]
            ]
            console.log(arr)
            that.guijidatas;
            // JSAPI2.0 使用覆盖物动画必须先加载动画插件
            AMap.plugin('AMap.MoveAnimation', function(){



               var marker = new AMap.Marker({
                    map: that.map,
                    position: arr[0],
                    icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
                    offset: new AMap.Pixel(-13, -26),
                });

                // 绘制轨迹
                var polyline = new AMap.Polyline({
                    map: that.map,
                    path: arr,
                    showDir:true,
                    strokeColor: "#28F",  //线颜色
                    // strokeOpacity: 1,     //线透明度
                    strokeWeight: 6,      //线宽
                    // strokeStyle: "solid"  //线样式
                });

                var passedPolyline = new AMap.Polyline({
                    map: that.map,
                    strokeColor: "#AF5",  //线颜色
                    strokeWeight: 6,      //线宽
                });


                marker.on('moving', function (e) {
                    passedPolyline.setPath(e.passedPath);
                    that.map.setCenter(e.target.getPosition(),true)
                });

                // that.map.setFitView();

                window.startAnimation = function startAnimation () {
                    marker.moveAlong(arr, {
                        // 每一段的时长
                        duration: 500,//可根据实际采集时间间隔设置
                        // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
                        autoRotation: true,
                    });
                };

                window.pauseAnimation = function () {
                    marker.pauseMove();
                };

                window.resumeAnimation = function () {
                    marker.resumeMove();
                };

                window.stopAnimation = function () {
                    marker.stopMove();
                };
            });
            startAnimation()
        },
        isSupportCanvas() {
            var elem = document.createElement('canvas');
            return !!(elem.getContext && elem.getContext('2d'));
        },
        getMapCenter() {
            alert("当前地图中心点：" + this.map.getCenter().getLng() + "," + this.map.getCenter().getLat());
        },
        initMap(id, callback){
            var that = this;

            if (!this.isSupportCanvas()) {
                alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')
            }

            const base_url = "/static/"
            const layer = new AMap.TileLayer({
                getTileUrl: function (x, y, z) {
                    return `${base_url}MAP_zxy/${z}/${x}/${y}/tile.png`;
                },
                opacity: 1,
                zIndex: 99,
            })


            var imageLayer = new AMap.ImageLayer({
                url: 'http://amappc.cn-hangzhou.oss-pub.aliyun-inc.com/lbs/static/img/dongwuyuan.jpg',
                bounds: new AMap.Bounds(
                    [117.14,39.12],
                    [117.16,39.14]
                ),
                zooms: [14, 16],
                zIndex: 100
            });

            // const layers = [layer, imageLayer]
            const layers = [layer]
            var lineArr = [
                [117.158935,39.137761],
                [117.158939,39.137825],
                [117.158912,39.138549],
                [117.158912,39.138549],
                [117.158998,39.138555],
                [117.158998,39.138555],
                [117.159282,39.13856],
                [117.159658,39.138528],
                [117.160151,39.138453],
                [117.160784,39.138302],
                [117.160784,39.138302],
                [117.161149,39.138184],
                [117.161573,39.137997],
                [117.161863,39.137846],
                [117.162072,39.137718],
                [117.162362,39.137718],
                [117.163633,39.138935],
                [117.16367,39.138968],
                [117.164648,39.139861]
            ];

            var map = null
            // AMap.plugin('AMap.MoveAnimation', function(){
                map = new AMap.Map("container", {
                    resizeEnable: true,
                    zoom: 16.7,
                    rotateEnable: true,
                    pitchEnable: true,
                    // center: [117.162036,39.138323],
                    center: that.mapCenter,
                    defaultCursor: 'pointer',
                    showLabel: true,  //是否显示文字标注
                    layers: layers
                });

                var circle = new AMap.Circle({

                    // center: [117.15,39.13],          //设置线覆盖物路径
                    center: that.mapCenter,          //设置线覆盖物路径
                    zIndex: 100,
                    radius: 150,
                    strokeColor: "#3366FF", //边框线颜色
                    strokeOpacity: 0.2,       //边框线透明度
                    strokeWeight: 2,        //边框线宽
                    // fillColor: "#FFA500", //填充色
                    fillOpacity: 0.15//填充透明度
                });

                //范围
                circle.setMap(map)


                // 绘制轨迹
                var polyline = new AMap.Polyline({
                    map: map,
                    path: lineArr,
                    showDir:true,
                    strokeColor: "#28F",  //线颜色
                    // strokeOpacity: 1,     //线透明度
                    strokeWeight: 6,      //线宽
                    // strokeStyle: "solid"  //线样式
                });

                var passedPolyline = new AMap.Polyline({
                    map: map,
                    // path: lineArr,
                    strokeColor: "#AF5",  //线颜色
                    // strokeOpacity: 1,     //线透明度
                    strokeWeight: 6,      //线宽
                    // strokeStyle: "solid"  //线样式
                });

                var icon = new AMap.Icon({
                    size: new AMap.Size(30, 28),
                    image: "/static/images/openlibrary/wurenjiku.png",
                    offset: new AMap.Pixel(0,0),
                    imageSize: new AMap.Size(30,28)
                })
                var marker_jiku = new AMap.Marker({
                    map: map,
                    position: that.mapCenter,
                    icon: icon,
                    offset: new AMap.Pixel(-13, -34)
                });


                var icon_wrj = new AMap.Icon({
                    size: new AMap.Size(30, 28),
                    image: "/static/images/openlibrary/wurenji.png",
                    offset: new AMap.Pixel(0,0),
                    imageSize: new AMap.Size(30,28)
                })
                var marker = new AMap.Marker({
                    map: map,
                    zIndex: 1000,
                    position: that.mapWrj,
                    //icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
                    // offset: new AMap.Pixel(-13, -26),
                    icon: icon_wrj,
                    offset: new AMap.Pixel(-13, -34)
                });

                /*marker.on('moving', function (e) {
                    passedPolyline.setPath(e.passedPath);
                    // map.setCenter(e.target.getPosition(),true)
                });
                marker.moveAlong(lineArr, {
                    // 每一段的时长
                    duration: 500,//可根据实际采集时间间隔设置
                    // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
                    autoRotation: true,
                });*/
                map.on('click', function(e) {
                    console.log( e.lnglat.getLng() + ',' + e.lnglat.getLat())
                });


            // });
            this.map = map;


            // this.getMapCenter();
            callback(map)
        },
        changeModel(){
            var newWin = window.open("/hub/v1/jiku", 'jk')
            if (newWin) {
                // 已经打开了窗口，不再重复打开
            } else {
                // 没有打开窗口，执行其他操作
            }
        },
        toDevice(){
           this.deviceDialog = true;
        },

        getWrjDevice:function(callback){
            var _this = this;
            $.ajax({
                type: "POST",
                url: root+"/device/wrj",
                data: {},
                success: function(data){
                    _this.wrjInfo =data;
                    if(callback){
                        callback();
                    }
                }
            });
        },
        getDcDevice:function(callback){
            var _this = this;
            $.ajax({
                type: "POST",
                url: root+"/device/dc",
                data: {},
                success: function(data){
                    _this.dcInfo =data;
                    if(callback){
                        callback();
                    }
                }
            });
        },
        getJkDevice:function(callback){
            var _this = this;
            $.ajax({
                type: "POST",
                url: root+"/device/jk",
                data: {},
                success: function(data){
                    _this.jkInfo =data;
                    if(callback){
                        callback();
                    }
                }
            });
        },
        sendWrjData:function(data, callback){
            var _this = this;
            $.ajax({
                type: "POST",
                url: root+"/device/sendWrjData",
                data: data,
                success: function(data){
                    console.log('定时推送wrj数据成功')
                    if(callback){
                        callback();
                    }
                }
            });
        },
        getDeviceList:function(){
            var _this = this;
            $.ajax({
                type: "POST",
                url: root+"/device/getDeviceList",
                data: {},
                success: function(data){
                    _this.tableDataDevice =data.object;
                }
            });
        },

        getDeviceUsersList:function(){
            var _this = this;
            $.ajax({
                type: "POST",
                url: root+"/deviceUsers/getDeviceUsersList",
                data: {},
                success: function(data){
                    _this.tableDataUsers =data.object;
                }
            });
        },
        enabledChange:function(val){
            var _this = this;
            $.ajax({
                type: "POST",
                url: root+"/deviceUsers/enabledChange",
                data: {id:val.id,enabled:val.enabled},
                success: function(data){
                    debugger
                    if (data.object==1){
                        _this.message = "修改成功";
                        _this.getDeviceUsersList();
                    }else {
                        _this.message = "修改失败";
                    }
                }
            });
        },
        //踢掉
        disconnectDevice :function (val){
            var _this = this;
            this.$confirm('踢掉当前用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                $.ajax({
                    type: "POST",
                    url: root+"/device/disconnectDevice",
                    data: {id:val},
                    success: function(data){
                        if( data.state == "OK"){
                            _this.getDeviceList()
                        }
                    }
                });
                this.$message({
                    type: 'success',
                    message: '当前设备已被踢出!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });

        },
        refreshDD:function(){
        	var _this = this;
        	$.ajax({
                type: "GET",
                url: root+"/dataDictionary/refesh",
                data: {},
                success: function(data){
                	console.log(data);
                    _this.message = "刷新成功";
                }
            });
        },
        sendMQ:function(){
        	var _this = this;
        	$.ajax({
                type: "GET",
                url: root+"/sendMQ",
                data: {"message":"test!!"},
                success: function(data){
                	console.log(data);
                    _this.message = "发送成功";
                }
            });
        },
        pushData:function(val){
        	var _this = this;
        	$.ajax({
                type: "GET",
                url: root+"/device/pushData",
                data: {id:val,data:"/aaaa/111"},
                success: function(data){
                	console.log(data);
                    _this.message = data;
                }
            });
        },
        mongodbAddData:function(){
        	var _this = this;
        	$.ajax({
                type: "POST",
                url: root+"/mongodb/save",
                data: {"gender":"1","name":"zhangsan"},
                success: function(data){
                	console.log(data);
                    _this.message = data;
                }
            });
        },
        mongodbGetData:function(){
        	var _this = this;
        	$.ajax({
                type: "POST",
                url: root+"/mongodb/findById",
                data: {"id":"1619141750342"},
                success: function(data){
                	console.log(data);
                    _this.message = data;
                }
            });
        }
    }
});
</script>
<style acoped>


    body{
        margin: 0;
        padding: 0;
        /*padding: 10px;*/

        background: #181818;
        color: #fff;
    }
    *{
        padding: 0;
        margin: 0;
    }


    .navbar{
        display: flex;
        justify-content: space-between;


    }

    .navbar-right{
        display: flex;
        justify-content: space-between;
    }



    .navbar-container{
        display: flex;
        justify-content: space-between;
        background: url("/static/img/sys/ (10).png");
        background-repeat: no-repeat;
        background-size: 100% 70px;
        height: 70px;
        width: calc(100% - 100px);
        position: relative;
    }
    .navbar-title{
        /*font-weight: bold;*/
        font-size: 34px;
        letter-spacing: 10px;
        margin-left: 100px;
        vertical-align: middle;
        margin-top: 10px;
    }
    .navbar-btns{
        position: absolute;
        display: flex;
        top: 32px;
        right: 25%;
        font-weight: bold;
        letter-spacing: 2px;

    }
    .navbar-btn{
        background: url("/static/img/sys/ (2).png") no-repeat  ;
        background-size: cover;
        height: 26px;
        width: 150px;
        margin-right: -15px;
        text-align: center;
        vertical-align: middle;
        background-position: center bottom;
        cursor: pointer;
        padding-top: 2px;
        color: #999;
    }

    .navbar-btn.btn-active{
        background: url("/static/img/sys/ (3).png") no-repeat  ;
        background-size: cover;
        color: #fff;
    }

    .times{
        position: absolute;
        top: 30px;
        right: 5%;
        color: rgba(255,255,255,0.8);
    }

    /*container*/
    .container{
        padding: 20px;
    }
    .container-bottom{

    }

    .c-left-item{
        min-height: calc((100vh - 70px) / 4 - 75px) ;
        color: rgba(255,255,255,0.8);
    }
    .c-left-item-title{
        position: relative;
        color: #fff;
        display: flex;
        justify-content: space-between;
    }
    .c-left-item-title img{
        position: relative;
        height: 35px;
    }
    .c-left-item-title span{
        position: absolute;
        top: 6px;
        left: 10px;
        letter-spacing: 1px;
        /*font-weight: bold;*/
        font-size: 16px;
    }
    .c-left-count-title{
        display: flex;

    }
    .env-content{
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        align-items: center;
        padding-top: 10px;
    }
    .env-item{
        width: 33%;
        display: flex;
        margin: 10px 0;
    }


    .env-item img{
        width: 40px;
        vertical-align: middle;
        margin-top: 10px;
    }
    .env-item .env-label > div{
        font-size: 20px;
        color: #EED8AF;
    }
    .env-item .env-label > span{
        font-size: 14px;
        color: rgba(255,255,255,0.8);
    }
    .env-item .env-label > div> span{
        font-size: 14px;
        color: #EED8AF;
    }
    /*机库*/
    .c-left-jk{
        margin-top: 20px;
    }
    .jk-content{
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        padding: 10px 0;
    }
    .jk-content > div{
        text-align: center;
        width: 50%;
    }
    .jk-label{
        font-size: 14px;

    }
    .jk-label ul{
        padding: 0 10px;
    }
    .jk-label ul li{
        float: left;
        list-style: none;
        padding: 0 5px;
    }
    .jk-label ul li:first-child{
        width: 60px;
    }
    .jk-label-line{
        height: 25px;
        background: #201D19;
        line-height: 25px;
        color: #BE9A64;
    }
    .jk-label-line:nth-child(odd){
        background: #2F281D;
    }
    .jk-label-line .key{
        color: rgba(255,255,255,0.6);;
    }

    /*无人机*/
    .c-left-wrj{
        margin-top: 20px;


    }
    .wrj-content{
        /*padding:  0 20px;*/
        text-align: center;
    }
    .wrj-labels{
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
    }
    .wrj-labels > div{
        width: 50%;
    }
    .wrj-labels .wrj-label-left{
        margin-right: 10px;
    }
    .wrj-label{
        font-size: 14px;

    }
    .wrj-label ul{
        padding: 0 10px;
    }
    .wrj-label ul li{
        float: left;
        list-style: none;
        padding: 0 5px;
    }
    .wrj-label ul li:first-child{
        width: 60px;
    }
    .wrj-label-line{
        height: 25px;
        background: #201D19;
        line-height: 25px;
        color: #BE9A64;
    }
    .wrj-label-line:nth-child(odd){
        background: #2F281D;
    }
    .wrj-label-line .key{
        color: rgba(255,255,255,0.6);;
    }

    /*统计*/
    .c-left-count{
        margin-top: 30px;
    }
    .c-left-count-title .count-label{
        text-align: center;
        padding: 10px 0;
    }
    .c-left-count-title .count-label div{
        color: #EED8AF;
        font-size: 16px;
    }

    .video-bg{
        background: url("/static/img/sys/ (9).png");
        background-size: 100% 300px;
        /*height: 300px;*/
        /*width: 100%;*/
        z-index: 1000;
        text-align: center;
    }

    .video-bg .video-title{
        position: absolute;
        top: 0px;
        text-align: center;
        width: 33%;

    }

    /*无人机控制面板*/
    .control-wrj{
        border: 1px solid #2F281D;
        position: absolute;
        top: 90px;
        right: 18px;
        /*height: 340px;*/
        /*width: 1200px;*/
        background: rgba(0,0,0,0.8);
        background-image: url("/static/img/sys-wrj/bj.png") ;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding: 90px 90px 90px 120px ;
    }
    .control-wrj-fun{
        display: flex;
        justify-content: space-between;
        margin: 50px 0;
    }


    /*机库控制面板*/
    .control-jk{
        border: 1px solid #2F281D;
        position: absolute;
        /*top: 120px;*/
        top: 90px;
        /*left: 30%;*/
        right: 18px;
        /*height: 340px;*/
        /*width: 1200px;*/
        background: rgba(0,0,0,0.8);
        background-image: url("/static/img/sys-wrj/bj.png") ;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding: 90px 90px 90px 120px ;
    }
    .control-jk-fun{
        display: flex;
        justify-content: space-between;
        margin: 50px 0;
    }
    .keyvalue{
        /*display: inline-block;*/
        /*width: 40px;*/
    }
</style>
</body>
</html>
